<template>
  <Page title="搜题结果">
    <template v-slot:navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">搜题结果</span>
        </div>
      </div>
    </template>
    <template v-slot:content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full p-20px box-border bg-white flex flex-col">
          <div class="tips text-center"> 为你找到以下{{ questions.length }}道相似题目 </div>
          <div class="list mt-20px flex-1 overflow-scroll">
            <div
              class="item mt-20px flex relative"
              :style="i.isExpand ? 'height:auto' : ''"
              v-for="(i, index) in questions"
              :key="i.questionId"
            >
              <div class="left flex-1 p-20px box-border relative">
                <div class="intro text-A3A3A3 flex items-center">
                  <div class="question-type text-51C3FF px-8px py-2px">
                    {{ i.typeName }}
                  </div>
                  <span class="px-10px">|</span>
                  <div class="flex items-center">
                    <span class="mr-6px">{{
                      i.difficultyLevel | diffcultyLevelName(questionDifficultyType)
                    }}</span>
                    <el-rate v-model="i.difficulty" disabled> </el-rate>
                  </div>
                  <template v-if="i.kpoints">
                    <span class="px-10px">|</span>
                    {{ i.kpoints[0].name }}
                  </template>
                </div>

                <div class="question text-333 mt-18px">
                  <div
                    class="stem"
                    :class="i.isExpand ? '' : 'img-hidden'"
                    :style="i.isExpand ? 'display:inherit' : ''"
                    v-html="i.stem"
                  ></div>
                  <div class="answer mt-14px" v-html="i.answer" v-show="i.isExpand"></div>
                  <div class="explanation mt-14px" v-html="i.explanation" v-show="i.isExpand"></div>
                </div>

                <div class="expand absolute text-768895" @click="itemExpand(index)">
                  <span> {{ i.isExpand ? '收起详情' : '展开详情' }}</span>
                  <img
                    class="dirIcon"
                    v-show="!i.isExpand"
                    src="@/assets/wqbook/down@2x.png"
                    @click="i.isExpand = !i.isExpand"
                    alt=""
                  />
                  <img
                    class="dirIcon"
                    v-show="i.isExpand"
                    src="@/assets/wqbook/up@2x.png"
                    @click="i.isExpand = !i.isExpand"
                    alt=""
                  />
                </div>
              </div>
              <div class="right h-full">
                <el-checkbox class="check absolute" v-model="i.isCheck"></el-checkbox>
              </div>
            </div>
          </div>
          <div class="add pt-37px pb-17px">
            <CustomButton class="block" style="width: 4.53rem" @click="submit"
              >加入错题本</CustomButton
            >
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/newPage'
import CustomButton from '@/components/button/index'
import { createWqBookApi } from '@/api/wq-book'
import { updateSearchQuestionsTime } from '@/api/wq-book'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    Page,
    CustomButton
  },
  filters: {
    diffcultyLevelName(difficultyLevel, types) {
      if (!difficultyLevel) return ''

      const type = types.find((type) => type.value == difficultyLevel)
      return type ? type.label : ''
    }
  },
  data() {
    return {
      // 累计时间
      cumulativeTime: {
        vm: this._self,
        timeout: null,
        // 单位：秒
        value: 0,
        // 累加
        run: function () {
          this.timeout = setTimeout(() => {
            this.value++
            this.run()
          }, 1000)
        },
        reset: function () {
          clearTimeout(this.timeout)
          this.value = 0
        }
      },
      questionDifficultyType: [],
      questions: []
    }
  },
  computed: {
    ...mapState(['wqBook']),
    searchQuestionId() {
      console.log(this.wqBook, '你是什么鬼')
      const { searchQuestionId } = this.wqBook
      return searchQuestionId
    }
  },
  async created() {
    this.questionDifficultyType = await this.getDictByType('question_difficulty_type')

    const { searchedQuestion = [] } = this.wqBook
    this.questions = JSON.parse(JSON.stringify(searchedQuestion)).map((q) => {
      q['difficulty'] = this.getDifficulty(q.difficultyLevel)
      q['isExpand'] = false
      q['isCheck'] = false
      return q
    })
  },
  mounted() {
    this.cumulativeTime.run()
  },
  beforeDestroy() {
    if (!Number.isNaN(parseInt(this.searchQuestionId))) {
      updateSearchQuestionsTime({
        searchQuestionId: this.searchQuestionId,
        studentDuration: this.cumulativeTime.value
      })
    }
    this.cumulativeTime.reset()
  },
  methods: {
    back() {
      if (this.onBack) {
        this.onBack()
      } else {
        this.$router.go(-1)
      }
    },
    ...mapActions(['getDictByType']),
    itemExpand(index) {
      this.$set(this.questions[index], 'isExpand', !this.questions[index].isExpand)
    },
    getDifficulty(difficultyLevel) {
      switch (parseInt(difficultyLevel)) {
        case 17:
          return 1
        case 18:
          return 2
        case 19:
          return 3
        case 20:
          return 4
        case 21:
          return 5
        default:
          return 1
      }
    },
    submit() {
      const checkedItems = this.questions.filter((q) => q.isCheck === true)

      const tasks = []
      if (checkedItems.length > 0) {
        checkedItems.forEach((i) => {
          tasks.push(
            createWqBookApi({
              questionId: i.questionId
            })
          )
        })
      } else {
        this.$message.info('请勾选题目')
        return
      }

      Promise.all(tasks).then(() => {
        this.$popup.show({
          type: 'alert',
          success: (popup) => {
            popup.$on('confirm', async () => {
              this.$popup.hide('alert')
            })
            popup.setData({
              content: `已成功添加${tasks.length}道题到错题本!`,
              confirmText: '完成'
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.container {
  border-radius: 16px;

  .tips {
    font-size: 28px;
    color: rgba(68, 68, 68, 1);
  }

  .list {
    .item {
      height: 156px;

      .left {
        border-radius: 10px;
        border: 1px solid #e8e8e8;

        .intro {
          font-size: 22px;
          line-height: 24px;

          .question-type {
            font-size: 22px;
            line-height: 24px;
            background-color: rgba(81, 195, 255, 0.1);
            border-radius: 4px;
          }
        }

        .question {
          font-size: 26px;
          line-height: 28px;

          .stem {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .img-hidden {
            /deep/ img {
              display: none;
            }
          }

          .answer {
          }

          .explanation {
          }
        }

        .expand {
          height: 28px;
          font-size: 26px;
          line-height: 28px;
          right: 20px;
          top: 68px;
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            margin-left: 5px;
          }
        }
      }

      .right {
        width: 40px;

        .check {
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          ::v-deep .el-checkbox__input {
            .el-checkbox__inner {
              border-radius: 50%;
              overflow: hidden;
              box-sizing: border-box;
            }
          }
        }
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .add {
    margin: 0 auto;
  }
}

/deep/ .el-checkbox {
  display: flex;
  align-items: center;
}

/deep/ .el-checkbox__label {
  font-size: 20px;
  color: #333;
}

/deep/ .el-checkbox__inner {
  width: 19px;
  height: 19px;
}

/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #51c3ff !important;
  border-color: #51c3ff;
}

/deep/ .el-checkbox__inner::after {
  left: 40%;
  top: 20%;
}

/deep/ .el-checkbox__input {
  height: 19px;
}
</style>
